{% extends "base.html" %}
{% load static %}
{% load analysis_filters %}

{% block title %}画像统计信息 - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'analysis/css/profile_statistics.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <!-- 页面头部 -->
    <div class="profile-statistics-header fade-in-up">
        <div class="row align-items-center">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'analysis:profile_dashboard' %}">知识点画像</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">数据统计</li>
                    </ol>
                </nav>
                <h1 class="mb-2">
                    <i class="fas fa-chart-pie me-2"></i>画像统计信息
                </h1>
                <p class="mb-0 opacity-75">
                    全面了解您的学习画像数据，洞察学习规律
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="btn-group">
                    <a href="{% url 'analysis:profile_dashboard' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>返回仪表板
                    </a>
                    <button id="exportStatistics" class="btn btn-light btn-sm">
                        <i class="fas fa-download me-1"></i>导出数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 总体概览 -->
    <div class="overview-cards fade-in-up">
        <div class="overview-card">
            <div class="overview-icon bg-purple">
                <i class="fas fa-bullseye"></i>
            </div>
            <div class="overview-value text-primary" data-stat="total-points">
                {{ total_knowledge_points }}
            </div>
            <div class="overview-label">总知识点数</div>
        </div>
        
        <div class="overview-card">
            <div class="overview-icon bg-primary">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="overview-value text-success" data-stat="avg-mastery">
                {{ avg_mastery|multiply:100|floatformat:1 }}%
            </div>
            <div class="overview-label">平均掌握度</div>
        </div>
        
        <div class="overview-card">
            <div class="overview-icon bg-success">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="overview-value text-info">
                {{ subject_stats|length }}
            </div>
            <div class="overview-label">涉及科目数</div>
        </div>
        
        <div class="overview-card">
            <div class="overview-icon bg-info">
                <i class="fas fa-trending-up"></i>
            </div>
            <div class="overview-value text-warning">
                {{ trend_stats.improving }}
            </div>
            <div class="overview-label">提升中知识点</div>
        </div>
    </div>

    <div class="distribution-charts">
        <!-- 掌握度分布 -->
        <div class="distribution-chart fade-in-up">
            <div class="chart-header">
                <h3 class="chart-title">
                    <i class="fas fa-chart-bar text-success"></i>掌握度分布
                </h3>
            </div>
            
            {% if mastery_distribution %}
            <div class="mastery-distribution">
                {% for item in mastery_distribution %}
                <div class="mastery-item">
                    <div class="mastery-info">
                        <div class="mastery-color 
                            {% if item.range == '优秀' %}bg-excellent
                            {% elif item.range == '良好' %}bg-good
                            {% elif item.range == '一般' %}bg-average
                            {% else %}bg-poor{% endif %}">
                        </div>
                        <span class="mastery-range">{{ item.range }}</span>
                    </div>
                    <div class="mastery-stats">
                        <span class="mastery-count">{{ item.count }}</span>
                        <span class="mastery-percentage">{{ item.percentage }}%</span>
                        <div class="mastery-progress">
                            <div class="mastery-progress-bar 
                                {% if item.range == '优秀' %}bg-excellent
                                {% elif item.range == '良好' %}bg-good
                                {% elif item.range == '一般' %}bg-average
                                {% else %}bg-poor{% endif %}" 
                                style="width: {{ item.percentage }}%">
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- 图表容器 -->
            <div class="chart-container">
                <canvas id="masteryDistributionChart"></canvas>
            </div>
            {% else %}
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-chart-bar"></i>
                </div>
                <p class="empty-description">暂无掌握度分布数据</p>
            </div>
            {% endif %}
        </div>

        <!-- 学习状态分布 -->
        <div class="distribution-chart fade-in-up">
            <div class="chart-header">
                <h3 class="chart-title">
                    <i class="fas fa-tasks text-primary"></i>学习状态分布
                </h3>
            </div>
            
            {% if status_stats %}
            <div class="status-distribution">
                {% for stat in status_stats %}
                <div class="status-item" style="border-left-color: {{ stat.status|get_status_color }};">
                    <div class="status-value">{{ stat.count }}</div>
                    <div class="status-label">{{ stat.status }}</div>
                </div>
                {% endfor %}
            </div>
            
            <!-- 图表容器 -->
            <div class="chart-container">
                <canvas id="statusDistributionChart"></canvas>
            </div>
            {% else %}
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-tasks"></i>
                </div>
                <p class="empty-description">暂无学习状态数据</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 科目维度统计 -->
    <div class="distribution-chart fade-in-up">
        <div class="chart-header">
            <h3 class="chart-title">
                <i class="fas fa-layer-group text-warning"></i>科目维度统计
            </h3>
        </div>
        
        {% if subject_stats %}
        <div class="subject-stats">
            {% for stat in subject_stats %}
            <div class="subject-item" data-subject-id="{{ stat.subject|get_subject_id }}" data-subject-name="{{ stat.subject }}">
                <div class="subject-info">
                    <div class="subject-color" style="background: {{ stat.color }};"></div>
                    <span class="subject-name">{{ stat.subject }}</span>
                </div>
                <div class="subject-details">
                    <span class="subject-count">{{ stat.total_points }}</span>
                    <span class="subject-mastery">{{ stat.avg_mastery|multiply:100|floatformat:1 }}%</span>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- 图表容器 -->
        <div class="chart-container">
            <canvas id="subjectComparisonChart"></canvas>
        </div>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">
                <i class="fas fa-layer-group"></i>
            </div>
            <p class="empty-description">暂无科目统计数据</p>
        </div>
        {% endif %}
    </div>

    <!-- 趋势分析 -->
    <div class="trend-analysis fade-in-up">
        <div class="chart-header">
            <h3 class="chart-title">
                <i class="fas fa-trending-up text-info"></i>学习趋势分析
            </h3>
        </div>
        
        <div class="trend-grid">
            <div class="trend-item">
                <div class="trend-value text-improving">{{ trend_stats.improving }}</div>
                <div class="trend-label">提升中知识点</div>
            </div>
            
            <div class="trend-item">
                <div class="trend-value text-declining">{{ trend_stats.declining }}</div>
                <div class="trend-label">下降中知识点</div>
            </div>
            
            <div class="trend-item">
                <div class="trend-value text-stable">{{ trend_stats.stable }}</div>
                <div class="trend-label">稳定知识点</div>
            </div>
            
            <div class="trend-item">
                <div class="trend-value text-primary">
                    {% widthratio trend_stats.improving total_knowledge_points 100 %}%
                </div>
                <div class="trend-label">积极趋势占比</div>
            </div>
        </div>
    </div>
</div>

<!-- 隐藏的数据用于JavaScript -->
<script id="masteryData" type="application/json">
{{ mastery_distribution|json_script:"masteryData" }}
</script>
<script id="statusData" type="application/json">
{{ status_stats|json_script:"statusData" }}
</script>
<script id="subjectData" type="application/json">
{{ subject_stats|json_script:"subjectData" }}
</script>
{% endblock %}

{% block extra_js %}
<script src="{% static 'analysis/js/profile_statistics.js' %}"></script>
{% endblock %}